<template>
    <div>
        <AppTitle title="添加账户" />
        <div class="formBox">
            <el-form
                :model="formData"
                style="width: 300px"
                :rules="rules"
                ref="formRef"
            >
                <el-form-item label="账号" prop="account">
                    <el-input v-model="formData.account" placeholder="请输入用户名"/>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="formData.password" placeholder="请输入密码" show-password/>
                </el-form-item>
                <el-form-item label="确认密码" prop="password2">
                    <el-input v-model="formData.password2" placeholder="请再次输入密码" show-password/>
                </el-form-item>
                <el-form-item label="用户组" prop="userGroup">
                    <el-select v-model="formData.userGroup" placeholder="请选择用户组">
                        <el-option label="超级管理员" value="超级管理员"/>
                        <el-option label="普通管理员" value="普通管理员"/>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">添加</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
    import AppTitle from '@/components/title/AppTitle.vue';
    import { reactive } from 'vue';
    import { accountAdd } from '@/api/account';
    const formData = reactive({
        account:'',
        password:'',
        password2:'',
        userGroup:'',
    });
    const rules = reactive({
        account:[
            {required:true,message:'请输入账号',trigger:'blur'},
            {min:3,max:10,message:'账号长度在3-10之间',trigger:'blur'},
        ],
        password:[
            {required:true,message:'请输入密码',trigger:'blur'},
            {min:3,max:10,message:'密码长度在3-10之间',trigger:'blur'},
        ],
        password2:[
            {required:true,message:'请再次输入密码',trigger:'blur'},
            {min:3,max:10,message:'密码长度在3-10之间',trigger:'blur'},
            {validator:(rule,value,cb)=>{
                if(value !== formData.password){
                    cb(new Error('两次密码不一致'))
                }else{
                    cb()
                }
            },trigger:'blur'}
        ],
        userGroup:[
            {required:true,message:'请选择用户组',trigger:'change'},
        ]

    })
    const submitForm = (formEl) => {
        accountAdd(formData).then(res=>{
            if(res.code === 0){
                ElMessage.success(res.msg);
                resetForm();
            }else{
                ElMessage.error(res.msg);
            }
        })
    }
    const resetForm = () => {
        formData.account = '';
        formData.password = '';
        formData.password2 = '';
        formData.userGroup = '';
    }
</script>

<style lang="scss" scoped>
    .formBox{
        width: 100%;
        padding-top: 40px;
        padding-left: 40px;
    }
    :deep(.el-form-item__label){
        width: 80px;
    }
</style>